<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
	<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/icon.css"/>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
	    var contextPath = function() {
	        return  "/" + location.pathname.split("/")[1];
	    }
	    
		function getValue(name){
			var str=window.location.search;
			if (str.indexOf(name)!=-1){
				var pos_start=str.indexOf(name)+name.length+1;
				var pos_end=str.indexOf("&",pos_start);
				if (pos_end==-1){
					return str.substring(pos_start);
				} else {
					return str.substring(pos_start,pos_end);
				}
			} else {
				return "";
			}
		}
		
		var  themeName = getValue("theme");
		if (themeName!=""){
		    var cssurl  = $('#easyuiTheme').attr('href');  
		    var href = cssurl.substring(0, cssurl.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';  
		    $('#easyuiTheme').attr('href', href);  
		}
	    
	    //将表单数据转为json
	    function form2Json(id) {
	        var arr = $("#" + id).serializeArray();
	        var jsonStr = "";
	        jsonStr += '{';
	        for (var i = 0; i < arr.length; i++) {
	            jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'
	        }
	        jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
	        jsonStr += '}';
	        var json = JSON.parse(jsonStr);
	        return json;
	    }
	    
	    //将表单数据转为json格式的字符串，当然也可以JSON.stringify(data)
 		function form2JsonStr(id) {
	        var arr = $("#" + id).serializeArray();
	        var jsonStr = "";
	        jsonStr += '{';
	        for (var i = 0; i < arr.length; i++) {
	            if ( arr[i].value != '' ) {
	            	jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'	            	
	            }
	        }
	        if (jsonStr.length > 1) {
	        	jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
	        }
	        jsonStr += '}';
	        return jsonStr;
	    }
	</script>

</head>

<style>
    .datagrid-btable{
        width:100%;
    }
    .datagrid-header-inner{
        width:100%;
    }
    .datagrid-header{
        width:100%;
    }
    .datagrid-htable{
        width:100%;
    }
    .datagrid-cell{margin:auto;}
    .fitem{text-align:center}
    .ftitle{text-align:center}
</style>

<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',title:''">	  
        <div id="dgtoolbar">		
        	<form name="searchform" method="post" action="" id ="searchform">	
				<a id="submit_condition">统计</a>
				<a id="reset_condition">重置</a>
				<td width="70" height="30">
					<strong>&nbsp;类型：</strong>
				    <select id="search_policy_type" class="easyui-combobox" name="policy_type" editable="false">
				    	<option value="" selected="selected">全部</option>
				    	<option value="纸质保单">纸质保单</option>
				    	<option value="电子保单">电子保单</option>
				    </select>	    			
				</td>	
				<td width="70" height="30">
					<strong>&nbsp;接件日期：</strong>
					<input id="search_intro_time1" name="introTimeBegin" class="easyui-datebox" editable="fasle" style="width:90px"></input>					
					<strong>-</strong>
					<input id="search_intro_time2" name="introTimeEnd" class="easyui-datebox" editable="fasle" style="width:90px"></input>
				</td>
				<td width="70" height="30">
					<strong>&nbsp;投保日期：</strong>
					<input id="search_insure_time1" name="insureTimeBegin" class="easyui-datebox" editable="fasle" style="width:90px"></input>					
					<strong>-</strong>
					<input id="search_insure_time2" name="insureTimeEnd" class="easyui-datebox" editable="fasle" style="width:90px"></input>
				</td>			
				<td width="70" height="30">
					<strong>&nbsp;回销日期：</strong>
					<input id="search_receipt_time1" name="receiptTimeBegin" class="easyui-datebox" editable="fasle" style="width:90px"></input>					
					<strong>-</strong>
					<input id="search_receipt_time2" name="receiptTimeEnd" class="easyui-datebox" editable="fasle" style="width:90px"></input>
				</td>			
				<td width="70" height="30">
					<strong>&nbsp;退回日期：</strong>
					<input id="search_return_time1" name="returnTimeBegin" class="easyui-datebox" editable="fasle" style="width:90px"></input>					
					<strong>-</strong>
					<input id="search_return_time2" name="returnTimeEnd" class="easyui-datebox" editable="fasle" style="width:90px"></input>
				
				</td>
			</form>
        </div>
        <div class="easyui-panel" style="padding:2px;">
			<div id="id_panel_receiptrate" class="easyui-panel" title="送单成功率" style="height:400px;padding:10px;"
					data-options="iconCls:'icon-sum',collapsible:true,maximizable:true,closable:true">				
       			<div id="id_container_receiptrate" style="height: 100%"></div>
			</div>
			<div id="id_panel_timeliness" class="easyui-panel" title="送单时效" style="height:400px;padding:10px;"
					data-options="iconCls:'icon-sum',collapsible:true,maximizable:true,closable:true">			
       			<div id="id_container_timeliness" style="height: 100%"></div>
			</div>
		</div>
    </div>
</div>
</body>



       <script type="text/javascript" src="../resources/echarts/echarts.min.js"></script>
       
<script type="text/javascript">
    $(function() { 	    	  
		//点击搜索
		$("#submit_condition").linkbutton({ iconCls: 'icon-search', plain: false }).click(function () {
			//保单送达率
			$.ajax({
				type:'POST',
				url:contextPath()+'/mdmis/countReceiptRateByProject',
			    data:form2JsonStr('searchform'),
			    dataType:'json',
				contentType: 'application/json',
			    beforeSend: function () {
					$.messager.progress({
						title: '提示', 
						msg: '操作进行中，请稍候……', 
						text: '' 
					});
			    },
			    complete: function () {
					$.messager.progress('close');
			    },
			    success:function(result){				
					if (result.success){
		                drawChartReceiptRate(result.rows);
		            } else {
		                $.messager.show({	// show error message
		                    title: 'Error',
		                    msg: result.errMsg
		                });
		            }
				}
			});  
			//保单送达时效
			$.ajax({
				type:'POST',
				url:contextPath()+'/mdmis/countTimelinessByProject',
			    data:form2JsonStr('searchform'),
			    dataType:'json',
				contentType: 'application/json',
			    beforeSend: function () {
					$.messager.progress({
						title: '提示', 
						msg: '操作进行中，请稍候……', 
						text: '' 
					});
			    },
			    complete: function () {
					$.messager.progress('close');
			    },
			    success:function(result){				
					if (result.success){
		                drawChartTimeliness(result.rows);
		            } else {
		                $.messager.show({	// show error message
		                    title: 'Error',
		                    msg: result.errMsg
		                });
		            }
				}
			}); 
        });
		//点击重置
		$("#reset_condition").linkbutton({ iconCls: 'icon-reload', plain: false }).click(function () {
            $('#search_policy_type').combobox('select','');
            $('#search_intro_time1').textbox('setValue',''); 
            $('#search_intro_time2').textbox('setValue',''); 
            $('#search_insure_time1').textbox('setValue',''); 
            $('#search_insure_time2').textbox('setValue',''); 
            $('#search_receipt_time1').textbox('setValue',''); 
            $('#search_receipt_time2').textbox('setValue',''); 
            $('#search_return_time1').textbox('setValue',''); 
            $('#search_return_time2').textbox('setValue',''); 
            $("#submit_condition").linkbutton().click();
        });
		
		//初始化界面
		var date = new Date();
		var year = date.getFullYear();
		var day = date.getDate();
		var month;
		if (day < 7) {
			month = date.getMonth();
			if ( month == 0 ){
				month = 12;
				year = year - 1;
			}
		} else {
			month = date.getMonth() + 1;
		}
		if (month < 10) {
		    month = "0" + month;
		}
		if (day < 10) {
		    day = "0" + day;
		}
		var initDate = year + "-" + month + "-01";
        $('#search_intro_time1').textbox('setValue',initDate); 
        $("#submit_condition").linkbutton().click();
    });
    
	//生成保单送达率的柱状图
    function drawChartReceiptRate(data){
    	var myChart = echarts.init(document.getElementById("id_container_receiptrate"),'light');//设置为light主题风格
    	var yMax = 1*100;
    	var xAxis_data = [];
    	var receipt_rates = [];
    	var receipt = [];
    	var total = [];
    	var gx_receipt_rate = ''; 
    	for (i in data) {
    		if (data[i].project=='广西汇总'){
    			gx_receipt_rate = data[i].receipt_rate*100;
    		}else {
        		xAxis_data.push(data[i].project); 
        		receipt_rates.push(data[i].receipt_rate*100);  
        		receipt.push(data[i].receipt); 
        		total.push(data[i].total);
    		}
    	}
    	var dataShadow = [];
    	for (var i = 0; i < receipt_rates.length; i++) {
    	    dataShadow.push(yMax);
    	}
    	option = {
    	    title: {
    	        text: '',
    	        subtext: '按项目统计'
    	    },
    	    tooltip : {
    	        trigger: 'axis',
    	        formatter: function(data){
    	        	//alert(JSON.stringify(data));
                    return ('<' + data[1]['name'] + '>'
                    		+'</br>总单量:' + total[data[1]['dataIndex']]
                    		+'</br>回销量:' + receipt[data[1]['dataIndex']]
                    		+'</br>成功率:' + data[1]['value'] + '%');
            	}
    	    },
    	    toolbox: {
    	        show : true,
    	        feature : {
    	            dataView : {show: true, readOnly: false},
    	            magicType : {show: true, type: ['line', 'bar']},
    	            saveAsImage : {show: true}
    	        }
    	    },
    	    calculable : true, //是否启用拖拽重计算特性，默认关闭(即值为false) 
    	    xAxis: {
    	        data: xAxis_data,
    	        axisLabel: {
    	            inside: false, 	//X轴的标签是在柱子内柱子外，如果true就是放在柱子内
    	            textStyle: {
    	                color: '#1C1C1C'
    	            }
    	        },
    	        axisTick: {
    	            show: false
    	        },
    	        axisLine: {
    	            show: false
    	        },
    	        z: 10
    	    },
    	    yAxis: {
    	    	type: 'value',
                name: '送达率(%)',
                nameTextStyle: {
                    color: '#999',
                },
    	        axisLine: {
    	            show: false
    	        },
    	        axisTick: {
    	            show: false
    	        },
    	        axisLabel: {
                    formatter: '{value}%',
    	            textStyle: {
    	                color: '#999'
    	            }
    	        }
    	    },
    	    dataZoom: [
    	        {
    	            type: 'inside'
    	        }
    	    ],
    	    series: [
    	        { // For shadow
    	            type: 'bar',
    	            itemStyle: {
    	                normal: {color: 'rgba(0,0,0,0.05)'}
    	            },
    	            barGap:'-100%',
    	            barCategoryGap:'40%',
    	            data: dataShadow,
    	            animation: false
    	        },
    	        {
    	            type: 'bar',
    	            itemStyle: {
    	                normal: {
    	                    color: new echarts.graphic.LinearGradient(
    	                        0, 0, 0, 1,
    	                        [
    	                            {offset: 0, color: '#83bff6'},
    	                            {offset: 0.5, color: '#188df0'},
    	                            {offset: 1, color: '#188df0'}
    	                        ]
    	                    )
    	                },
    	                emphasis: {
    	                    color: new echarts.graphic.LinearGradient(
    	                        0, 0, 0, 1,
    	                        [
    	                            {offset: 0, color: '#2378f7'},
    	                            {offset: 0.7, color: '#2378f7'},
    	                            {offset: 1, color: '#83bff6'}
    	                        ]
    	                    )
    	                }
    	            },
    	            data: receipt_rates,
    	            markLine : {
    	            	label: {
    	                    normal: {
    	                      show: true,
    	                      position: 'middle',
    	                      formatter: '全区配送成功率{c}%',
    	                    },
    	                },
    	                data : [
    	                	{
    							silent:false,//鼠标悬停事件  true没有，false有
    							lineStyle:{//警戒线的样式  ，虚实  颜色
                                    type:"solid",
    								color:"#FA3934",
    							},
    						yAxis: gx_receipt_rate  // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
    						}
    	                ]
    	            }
    	        }
    	    ]
    	};

    	if (option && typeof option === "object") {
    	    myChart.setOption(option, true);
    	}
    	// Enable data zoom when user click bar.
    	var zoomSize = 6;
    	myChart.on('click', function (params) {
    	    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    	    myChart.dispatchAction({
    	        type: 'dataZoom',
    	        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
    	        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    	    });
    	});
    }
	
    //生成保单送达时效的柱状图
    function drawChartTimeliness(data){
    	var myChart = echarts.init(document.getElementById("id_container_timeliness"),'light');//设置为light主题风格
    	var xAxis_data = [];
    	var show_data = [];
    	var gx_timeliness = ''; 
    	for (i in data) {
    		if (data[i].project=='广西汇总'){
    			gx_timeliness = data[i].timeliness;
    		}else {
        		xAxis_data.push(data[i].project); 
        		show_data.push(data[i].timeliness);    			
    		}
    	}
    	option = {
    	    title : {
    	        text: '',
    	        subtext: '按项目统计'
    	    },
    	    tooltip : {
    	        trigger: 'axis'
    	    },
    	    //legend: {
    	    //    data:['送达率','降水量']
    	    //},
    	    toolbox: {
    	        show : true,
    	        feature : {
    	            dataView : {show: true, readOnly: false},
    	            magicType : {show: true, type: ['line', 'bar']},
    	            restore : {show: true},
    	            saveAsImage : {show: true}
    	        }
    	    },
    	    calculable : true,
    	    xAxis : [
    	        {
    	            type : 'category',
    	            data : xAxis_data
    	        }
    	    ],
    	    yAxis : [{
                type: 'value',
                name: '时效(日)',
                nameTextStyle: {
                    color: '#6495ED',
                },
                axisLabel: {
                    formatter: '{value} ',
                    textStyle: {
                        color: '#6495ED',
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dotted",
                        color: ['#6495ED']
                    }
                }
            }],
    	    series : [
    	        {
    	            name:'送达时效',
    	            type:'bar',
    	            data: show_data,
    	            itemStyle: {
    	                normal: {
    	                  label: {
    	                    show: true,
    	                    position: 'inside',//数据在中间显示
    	                    formatter:'{c}'//百分比显示
    	                  }
    	                }
    	            },
    	            markPoint : {
    	                data : [
    	                    {type : 'max', name: '最大值'},
    	                    {type : 'min', name: '最小值'}
    	                ]
    	            },
    	            markLine : {
    	                data : [
    	                	{
								silent:false,//鼠标悬停事件  true没有，false有
								lineStyle:{//警戒线的样式  ，虚实  颜色
	                                type:"solid",
									color:"#FA3934",
								},								
							yAxis: gx_timeliness  // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
    	                	}
    	                ]
    	            }
    	        }
    	    ]
    	};
    	if (option && typeof option === "object") {
    	    myChart.setOption(option, true);
    	}
    }
</script>


</html>



